<template>
    <el-row>
        <el-col>
            <el-alert
                title="什么时候需要授权"
                type="info"
                description="添加渠道关联时, 没有可以选择的广告主ID, 即表示未授权, 需要进行授权"
                :closable="false"
                show-icon>
            </el-alert>
        </el-col>
        <el-col :span="8" :lg="6">
            <div class="mt-10">
                <h3>快手 - 磁力引擎授权流程</h3>
                <el-steps direction="vertical" :active="4" class="mt-10" finish-status="process" style="width: 100%; height: 300px;">
                    <el-step title="确认配置信息">
                        <template slot="description">
                            <p>
                                操作平台:
                                <el-link type="primary" title="点击跳转" target="_blank" href="https://developers.e.kuaishou.com/application">
                                    磁力引擎 - 开放平台</el-link>
                            </p>
                            <p>应用ID: {{ configs.kuaishou.app_id }}</p>
                            <!--<p>应用Secret: {{ configs.kuaishou.secret }}</p>-->
                            <p>若配置信息不匹配, 请联系管理员</p>
                        </template>
                    </el-step>
                    <el-step title="设置回调地址">
                        <template slot="description">
                            在应用设置中设置回调地址为:
                            <p class="color-primary"><b style="font-size: 15px;">{{ configs.kuaishou.callback }}</b></p>
                        </template>
                    </el-step>
                    <el-step title="访问授权URL">
                        <template slot="description">
                            <el-link type="primary" title="点击跳转" target="_blank" :href="kuaishouAuthUrl">点我进行授权</el-link>
                            <p>选择基于用户授权, 确认授权后页面提示 <span class="color-success">操作成功</span>, 即表示授权完成</p>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </el-col>
        <el-col :span="8" :lg="6">
            <div class="mt-10">
                <h3>抖音 - 巨量引擎授权流程</h3>
                <el-steps direction="vertical" :active="4" class="mt-10" finish-status="process" style="width: 100%; height: 300px;">
                    <el-step title="确认配置信息">
                        <template slot="description">
                            <p>
                                操作平台:
                                <el-link type="primary" title="点击跳转" target="_blank" href="https://open.oceanengine.com/developer/admin/ad_list/#/external/">巨量引擎 - 开放平台</el-link>
                            </p>
                            <p>应用ID: {{ configs.douyin.app_id }}</p>
                            <!--<p>应用Secret: {{ configs.douyin.secret }}</p>-->
                            <p>若配置信息不匹配, 请联系管理员</p>
                        </template>
                    </el-step>
                    <el-step title="设置回调地址">
                        <template slot="description">
                            在应用设置中设置回调地址为:
                            <p class="color-primary"><b style="font-size: 15px;">{{ configs.douyin.callback }}</b></p>
                        </template>
                    </el-step>
                    <el-step title="访问授权URL">
                        <template slot="description">
                            <el-link type="primary" title="点击跳转" target="_blank" :href="douyinAuthUrl">点我进行授权</el-link>
                            <p>选择基于用户授权, 确认授权后页面提示 <span class="color-success">操作成功</span>, 即表示授权完成</p>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </el-col>
        <el-col :span="8" :lg="6">
            <div class="mt-10">
                <h3>百度 - 百度营销授权流程</h3>
                <el-steps direction="vertical" :active="4" class="mt-10" finish-status="process" style="width: 100%; height: 300px;">
                    <el-step title="确认配置信息">
                        <template slot="description">
                            <p>
                                操作平台:
                                <el-link type="primary" title="点击跳转" target="_blank" href="https://dev2.baidu.com/center">百度营销 - 商业开发者中心</el-link>
                            </p>
                            <p>应用ID: {{ configs.baidu.app_id }}</p>
                            <!--<p>应用Secret: {{ configs.baidu.secret }}</p>-->
                            <p>若配置信息不匹配, 请联系管理员</p>
                        </template>
                    </el-step>
                    <el-step title="设置回调地址">
                        <template slot="description">
                            在应用设置中设置回调地址为:
                            <p class="color-primary"><b style="font-size: 15px;">{{ configs.baidu.callback }}</b></p>
                        </template>
                    </el-step>
                    <el-step title="访问授权URL">
                        <template slot="description">
                            <el-link type="primary" title="点击跳转" target="_blank" :href="baiduAuthUrl">点我进行授权</el-link>
                            <p>选择基于用户授权, 确认授权后页面提示 <span class="color-success">操作成功</span>, 即表示授权完成</p>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </el-col>
        <el-col class="hidden-lg-and-up">
            <el-divider></el-divider>
        </el-col>
        <el-col :span="8" :lg="6">
            <div class="mt-10">
                <h3>腾讯 - 腾讯广告授权流程</h3>
                <el-steps direction="vertical" :active="4" class="mt-10" finish-status="process" style="width: 100%; height: 300px;">
                    <el-step title="确认配置信息">
                        <template slot="description">
                            <p>
                                操作平台:
                                <el-link type="primary" title="点击跳转" target="_blank" href="https://developers.e.qq.com/app">腾讯广告 - 开发者中心</el-link>
                            </p>
                            <p>应用ID: {{ configs.tencent.app_id }}</p>
                            <!--<p>应用Secret: {{ configs.baidu.secret }}</p>-->
                            <p>若配置信息不匹配, 请联系管理员</p>
                        </template>
                    </el-step>
                    <el-step title="设置回调地址">
                        <template slot="description">
                            在应用设置中设置回调地址为:
                            <p class="color-primary"><b style="font-size: 15px;">{{ configs.tencent.callback }}</b></p>
                        </template>
                    </el-step>
                    <el-step title="访问授权URL">
                        <template slot="description">
                            <el-link type="primary" title="点击跳转" target="_blank" :href="tencentAuthUrl">点我进行授权</el-link>
                            <p>选择基于用户授权, 确认授权后页面提示 <span class="color-success">操作成功</span>, 即表示授权完成</p>
                            <p>需要使用 <span class="color-success">商务管家</span> 进行授权</p>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </el-col>
<!--        <el-col :span="8">-->
<!--            <el-alert-->
<!--                title="什么时候需要授权"-->
<!--                type="info"-->
<!--                description="添加渠道关联时, 没有可以选择的广告主ID, 即表示未授权, 需要进行授权"-->
<!--                :closable="false"-->
<!--                show-icon>-->
<!--            </el-alert>-->

<!--            <div class="mt-10">-->
<!--                <h3>抖音2 - 巨量引擎授权流程</h3>-->
<!--                <el-steps direction="vertical" :active="4" class="mt-10" finish-status="process" style="width: 100%; height: 300px;">-->
<!--                    <el-step title="确认配置信息">-->
<!--                        <template slot="description">-->
<!--                            <p>-->
<!--                                操作平台:-->
<!--                                <el-link type="primary" title="点击跳转" target="_blank" href="https://open.oceanengine.com/developer/admin/ad_list/#/external/">巨量引擎 - 开放平台</el-link>-->
<!--                            </p>-->
<!--                            <p>应用ID: {{ configs.douyin2.app_id }}</p>-->
<!--                            &lt;!&ndash;<p>应用Secret: {{ configs.douyin.secret }}</p>&ndash;&gt;-->
<!--                            <p>若配置信息不匹配, 请联系管理员</p>-->
<!--                        </template>-->
<!--                    </el-step>-->
<!--                    <el-step title="设置回调地址">-->
<!--                        <template slot="description">-->
<!--                            在应用设置中设置回调地址为:-->
<!--                            <p class="color-primary"><b style="font-size: 15px;">{{ configs.douyin2.callback }}</b></p>-->
<!--                        </template>-->
<!--                    </el-step>-->
<!--                    <el-step title="访问授权URL">-->
<!--                        <template slot="description">-->
<!--                            <el-link type="primary" title="点击跳转" target="_blank" :href="douyin2AuthUrl">点我进行授权</el-link>-->
<!--                            <p>选择基于用户授权, 确认授权后页面提示 <span class="color-success">操作成功</span>, 即表示授权完成</p>-->
<!--                        </template>-->
<!--                    </el-step>-->
<!--                </el-steps>-->
<!--            </div>-->
<!--        </el-col>-->
    </el-row>
</template>

<script>
export default {
    name: 'course',
    data () {
        return {

        };
    },
    computed: {
        kuaishouAuthUrl() {
            return `https://developers.e.kuaishou.com/tools/authorize?app_id=${this.configs.kuaishou.app_id}&scope=%5B%22ad_query%22%2C%22ad_manage%22%2C%22report_service%22%2C%22account_service%22%2C%22public_dmp_service%22%2C%22public_agent_service%22%2C%22public_account_service%22%5D&redirect_uri=${this.configs.kuaishou.callback}&state=abcd&oauth_type=advertiser`;
        },
        douyinAuthUrl() {
            return `https://open.oceanengine.com/audit/oauth.html?app_id=${this.configs.douyin.app_id}&state=your_custom_params&scope=%5B4%5D&material_auth=1&redirect_uri=${this.configs.douyin.callback}&rid=xn9sqpwhkd`;
        },
        baiduAuthUrl() {
            return `https://u.baidu.com/oauth/page/index?platformId=4960345965958561794&appId=${this.configs.baidu.app_id}&scope=72,65,66&state=f5eb9ae88fe9d320b75f2a72435c726b&callback=${this.configs.baidu.callback}`;
        },
        tencentAuthUrl() {
            return `https://developers.e.qq.com/oauth/authorize?client_id=${this.configs.tencent.app_id}&redirect_uri=${this.configs.tencent.callback}&state=123`;
        },
        // douyin2AuthUrl() {
        //     return `https://open.oceanengine.com/audit/oauth.html?app_id=${this.configs.douyin2.app_id}&state=your_custom_params&scope=%5B4%5D&material_auth=1&redirect_uri=${this.configs.douyin2.callback}&rid=xn9sqpwhkd`;
        // },
        configs() {
            return this.$store.state.appSourceCpa.configs;
        },
    },
    methods: {

    },
    created() {

    }
}
</script>

<style scoped>

</style>
